<template>
  <view class="summary">
    <view v-for="(item, index) in summaryList" class="summary-item" :key="index">
      <text>{{ item.label }}</text>
      <text class="value">{{ unitVal(item.value, '元') }}</text>
    </view>
  </view>
</template>

<script setup>
  import { computed } from 'vue'
  import { unitVal } from '@/utils'
  const props = defineProps({
    summaryData: {
      type: Object,
      default: () => {},
    },
  })

  const summaryList = computed(() => {
    let { waitPayAmount, checkAmount, payAmount } = props.summaryData
    return [
      {
        label: '等待付款',
        value: waitPayAmount || 0,
      },
      {
        label: '待审批/审批中',
        value: checkAmount || 0,
      },
      {
        label: '已付款',
        value: payAmount || 0,
      },
    ]
  })
</script>
<style lang="scss" scoped>
  .summary {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 10rpx 0;
    border-bottom: 1px solid #f7f8fa;
    .value {
      color: #3072f6;
    }
    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 24rpx;
      flex: 1;
    }
    &-item:nth-child(2) {
      border-left: 1px solid #f7f8fa;
      border-right: 1px solid #f7f8fa;
    }
  }
</style>
